<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <style>
        *{padding: 0;margin: 0;}
        .countDown {
            width: fit-content;
            padding: 0 10px;
            line-height: 40px;
        }
    </style>
</head>

<body>
    <div id="app">
        <my-count-down :times="4*60*60*1000"></my-count-down>
        <my-count-down :times="1*60*60*1000"></my-count-down>
        <my-count-down :times="25*60*60*1000" format="DD天HH时mm分ss秒"></my-count-down>
    </div>
</body>
<template id="demo">
    <div class="countDown">
        <template v-if="format">{{formatStr}}</template>
        <template v-else>{{hour}}:{{min}}:{{sec}}</template>
    </div>
</template>
<script>
    // V2:  组件名建议使用中划线命名法 (my-count-down)
    // V3:  组件名建议使用大驼峰式命名法 (MyCountDown)

    // 注意: 
    // 组件传参需要遵从单向数据流的原则, 父组件给子组件传递的数据 -> 子组件不能直接修改 
    
    // 如果子组件需要修改父组件传入的数据 => 变相改
    // 1. 把从父组件接收的数据作为 子组件某个属性的初始值

    Vue.component("MyCountDown", {
        props:{
            times:{
                type:Number,
                required:true,
            },
            format:{
                type:String,
                default:"",
            }
        },
        data() {
            return {
                // time: 4*60*60*1000, // 定值

                time: this.times, // 单位ms (从父组件传入 作为time的初始值)
                timer: null,
            }
        },
        template: `#demo`,
        methods: {
            beauty(val) {
                return val.toString().padStart(2, "0");
            },
            timeDown() {
                clearInterval(this.timer);
                this.timer = setInterval(() => {
                    this.time -= 1000;
                    if (this.time <= 0) {
                        clearInterval(this.timer);
                    }
                }, 1000);
            }
        },
        computed: {
            day() {
                return this.beauty(parseInt(this.time / (24 * 60 * 60 * 1000)));
            },
            hour() {
                return this.beauty(parseInt(this.time / (60 * 60 * 1000)) % 24);
            },
            min() {
                return this.beauty(parseInt(this.time / (60 * 1000)) % 60);
            },
            sec() {
                // 总的时间(ms) / 1000 =>  xxx秒(总的秒数)
                return this.beauty(parseInt(this.time / 1000) % 60);
            },
            formatStr(){
                // this.format DD天HH时mm分ss秒
                return  this.format.replace("DD",this.day).replace("HH",this.hour).replace("mm",this.min).replace('ss',this.sec);
            }
        },
        mounted() {
            this.timeDown();
            console.log("$props",this.$props);
        },
        beforeDestroy() {
            console.log("准备销毁组件");
            clearInterval(this.timer);
        },
    })


    var vm = new Vue({
        el: "#app",


    })



</script>

</html>